<template>
    <div>
        <Tables 
        :title ='title'      
        :field = 'field' 
        :tableData ='tableData' 
        :animateShow = "animate_show"
        :perNum='per_num' 
        :totalNum="total_num" 
        :collectField = "collect_field" 
        :curPage="cur_page"
        :pageSize='pageSize' 
        :tableNotice="$t('realTime.tableNotice1')"
        :rankable ="true"
        @rankData = "rankData"
        @reset="reset"  
        @loadData ="getData"  
        @sentEditData="getEditData"
        @clearInterval="ClearInterval"
		@setBolck ="setBolckModal"
        @changePageSize = 'changePageSize' >
            <div slot="filter">
                <search :searchFiled="searchFiled" @searchEvent = "searchData"></search>
            </div>
        </Tables>

        <Modals 
        :id ="'modal'" 
        :title ="$t('common.unblockTitle')"  
        :status = "status" 
        :errorMsg="errorMsg"
        @sentErrorMsg = "getErrorMsg" 
        @modalEvent ="setBolck">
            <div slot="add_edit">
                <p style="font-size: 16px;">{{$t('common.unblockNotice')}}</p>
            </div>
        </Modals>
    </div>
</template>
<script>
    import Tables from 'components/common/Tables'
    import Modals from 'components/common/Modals'
    import realTimeService from 'services/realTimeService'
	import indexService from 'services/indexService'
    import defendService from 'services/defendService'

    import PageData from 'libs/PageData'
	import search from 'components/common/search'
    export default {
		components:{
		    Tables,
            Modals,
			search        
	    },
        data() {
            return{
                title:this.$t('realTime.navBtn5'),
                field:[
                    {
                        type:'rank'
                    },
                    {
                        type:'text',
                        label:this.$t('realTime.blockTableTh1'),
                        name:'mac',
                    },
                    {
                        type:'none',
                        label:this.$t('realTime.blockTableTh2'),
                        name:'desc',
                        editable:true,
                        regex:/^[\w\u4e00-\u9fa5]{0,16}$/
                    },
                    {
                        type:'text',
                        label:this.$t('realTime.blockTableTh3'),
                        name:'timestamp',
                    },
                    {
                        type:'opration',
                        label:[this.$t('common.unblockBtn'),this.$t('common.blockBtn')] ,
                        event:'setBolck',
                        linkname:'is_drop',
                        collectname:'mac'
                    }
                ],
				searchFiled:[
                    {
                        type:'text',
                        label:this.$t('realTime.blockTableTh1'),
                        name:'source',
                        regex: /^((2[0-4]\d|25[0-5]|[01]?\d\d?)\.){1,3}(2[0-4]\d|25[0-5]|[01]?\d\d?)?$|^([0-9A-Fa-f]{2}:){1,6}$/,
                    },
                    {
                        type:'text',
                        label:this.$t('realTime.blockTableTh2'),
                        name:'desc',
                        regex:/^[\w\u4e00-\u9fa5]{0,16}$/
                    },
                    {
                        type:'time-rang',
                        label:this.$t('common.searchLabel1'),
                        name:['start_time','end_time'],
                    }
                ],
                tableData:[],
                per_num:25,
                total_num:1,
                collect_field:'mac',              
                select_item:[],
                status:"",
                errorMsg:'',
                type:'',
                edit_data:{},
				block:'',
                cur_page:1,
                pageSize:[10, 20, 40, 80],
				finddata:{},
                animate_show:false,
                params:{},
                setTimeout:false,
                size:10,
                order:'',
                by:'',
            }
        },
        created() {
            this.getData()
            this.intervalid = setInterval(()=>{ this.getData() },1000)
        },
        methods:{
            getEditData(editdata) {
                this.edit_data = editdata 		
				this.edit_data.oper = 'unblock'
            },
            getErrorMsg(msg) {
                this.errorMsg = msg
            },
            reset(type) {
                this.status = ""
                this.errorMsg = ''
                this.type = type
            },  
			setBolckModal(block, operid) {
				this.reset()
				this.block = block
				this.edit_data = {
					ipmac: operid,
					oper: 'unblock'
				}		
				$('#modal').modal('show')
			},
			setBolck() {
                this.status='ing'	
				realTimeService.setBlock(this.edit_data)
				.then((res) => {	
					if (res.errcode === 0) {
						this.status='ok'
						this.getData()						
					} else {
						this.status='error'
						this.errorMsg = res.errorMessage
					}
				})
			},
			searchData(searchData) {
                this.animate_show = true
                this.params = searchData
				this.getData()
			},
            ClearInterval(val) {
                this.setTimeout=val
                clearTimeout(this.intervalid)
            },
            changePageSize (nowpage, size) {
                this.cur_page = nowpage
                this.size = size
                this.getData()
            }, 
            rankData(param){
                this.order = param.order
                this.by =  param.by==='mac'?'source':param.by
                this.getData()
            },
            getData(){
                realTimeService.getBlockList(this.cur_page,this.size,this.order,this.by,this.params)
                .then((res)=>{
                    this.animate_show = false
                    if(res.errcode===0){
                        this.tableData = res['12'].stats.map((item)=>{
                            item.mac = item.source
                            item.is_drop = true
                            item.timestamp = this.formatDate(item.timestamp )
                            return item
                        })
                        this.total_num = res['12'].count
                    }else{
                        clearInterval(this.intervalid)
                    }
                })
                .fail((res)=>{
                    clearInterval(this.intervalid)
                })
            },
            formatDate(timestrap){
                let time  = new Date(timestrap * 1000)
                let year = time.getFullYear()
                let month = time.getMonth()+1
                let date = time.getDate()
                let hour = time.getHours()
                let minutes = time.getMinutes()
                let seconds = time.getSeconds()

                return `${year}-${sigForamt(month)}-${sigForamt(date)} ${sigForamt(hour)}:${sigForamt(minutes)}:${sigForamt(seconds)}`
                
                function sigForamt(time){
                    return Number(time) > 9 ? time :  '0' + time
                }
            }
        },
		beforeDestroy() {
            clearInterval(this.intervalid)
		}
    }
</script>
<style scoped>
	.button {
		height: 20px;
		margin-right: 10px;
	}
	.active {
		background: #69b6ff;
		color: #ffffff;
	}
	.unactive{
		background: #e8e8e8;
		color: #444!important;
	}
	
</style>